<template>
    <div class="role">
        <!-- 回到顶部 -->
        <el-backtop :right="100" :bottom="100" ref="backTop" target=".el-main" />
        <div class="nav">
            <el-row>
                <el-input placeholder="请输入管理员ID" v-model="searchAdminId" />
                <el-button type="primary" @click="search()">查找</el-button>
            </el-row>
        </div>
        <div class="table">
            <!-- max-height="700" -->
            <el-table :data="tableData" style="width: 1200px;" border>
                <el-table-column prop="id" label="日志ID" align="center" />
                <el-table-column prop="adminId" label="管理员ID" align="center" />
                <el-table-column prop="requestId" label="请求ID" align="center" />
                <el-table-column prop="method" label="API方法" align="center" />
                <el-table-column prop="group" label="API分组" align="center" />
                <el-table-column prop="gmtCreate" label="操作时间" align="center">
                    <template #default="scope">
                        {{ new Date(scope.row.gmtCreate).friendTime() }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="Pagination">
            <Pagination :data="pagination" @setlm="getlm" @setpg="getpg"></Pagination>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import type { IBackStatus } from "#/index";
import { get } from '@/utils/https'
import { onMounted, reactive, ref, nextTick, computed, watch } from 'vue'
import Pagination from '../../components/Pagination/Pagination.vue'//分页组件

let backTop = ref()//表格回到顶部绑定的数据

let pages = computed(() => Math.ceil(pagination.count / pagination.limit))//最大页数
// 初始化数据
let tableData: TypeLog[] = reactive([]) //表格数据
// 分页绑定数据
let pagination = reactive({
    page: 1,
    limit: 20,
    count: 0
})
let searchAdminId = ref('')//查找

/**
 * 查找
 */
function search() {
    getInit()
}

/**
 * 分页自定义事件
 */
const getlm = (v: IBackStatus) => {
    pagination.limit = v.backStatus
    // getInit()
}
const getpg = (v: IBackStatus) => {
    pagination.page = v.backStatus
    // getInit()
}

// 获取初始化数据
let getInit = () => {
    let data = {
        _gp: 'admin.log',
        _mt: 'list',
        page: pagination.page,
        limit: pagination.limit,
        targetAdminId: searchAdminId.value,
        adminId: null,
    }
    get(data).then((res) => {
        // console.log('操作日志获取数据成功', res)
        tableData.length = 0
        tableData.push(...res.data.items)
        // tableData.forEach((item) => {
        //     item.gmtCreate = new Date(item.gmtCreate).friendTime()
        // })
        pagination.count = res.data.count
        //返回表格顶部
        nextTick(() => {
            // tableRef.value.$refs.scrollBarRef.setScrollTop(0)
            // // tableRef.value.$refs.scrollBarRef.scrollTo
            backTop.value.$el.click?.()
        })
    })
}
onMounted(() => {
    getInit()
})

// 解决分页请求两次问题
watch([() => pagination.limit, () => pagination.page], (values, oldValues) => {
    // console.log(pagination.page, 'pagination.page');
    // console.log(pagination.page <= pages.value, 'pagination.page');
    // console.log(pages.value, 'pages');
    if (pagination.page <= pages.value) {
        getInit()
    }
})
</script>
    
<style lang="less" scoped>
.role {
    // width:100% ;
    // height: 88vh;
    // background-color: blueviolet;
    margin: 10px;
}

.el-row {
    margin-bottom: 10px;
    width: 1200px;
    height: 32px;
    // overflow: hidden;
}

.table {
    background-color: white;
    width: 100%;
    // height: 700px;
}

.el-input {
    width: 180px;
    margin: 0px 15px;
}
</style>